import React from 'react';
import './styles.less';
import YellowBoard from './components/yellow-board';
import BlueBoard from './components/blue-board';
import GreenBoard from './components/green-board';
import OrangeBoard from './components/orange-board';
import PurpleBoard from './components/purple-board';
import DicesPool from './components/dices-pool';
import Ex from './components/ex';
import { useStore } from './store';
import { GeneralContext } from './context';
import 'antd/dist/antd.css';

function GanClever() {
  const store = useStore();
  return (
    <GeneralContext.Provider
      value={{
        store: store,
      }}
    >
      <div className="app-root">
        <h1>Ganz schön clever</h1>
        <div className="dice-ground">
          <div>
            <button
              style={{ width: '60px', height: '60px' }}
              onClick={() => {
                store.rockDices();
              }}
            >
              投骰子
            </button>
            <button
              style={{ width: '60px', height: '27px', marginTop: '4px' }}
              onClick={() => {
                store.beRockDices();
              }}
            >
              被动
            </button>
          </div>
          <div className="dice-ground-content">
            <DicesPool />
          </div>
          <div className="flexCenter-co">
            <div className="square-cell add1">+1</div>
            {store.add1}
          </div>
          <div className="flexCenter-co">
            <div className="square-cell reroll">重投</div>
            {store.reRoll}
          </div>
          <div>
            <button
              style={{ width: '70px', height: '30px', marginBottom: '10px' }}
              onClick={() => {
                store.back();
              }}
            >
              悔一步
            </button>
            轮次 {store.round} / 6
            <button
              style={{ width: '70px', height: '30px' }}
              onClick={() => {
                store.nextRound();
              }}
            >
              下一轮
            </button>
          </div>
        </div>
        {/* <Ex /> */}
        <div className="dashboard">
          <div className="yellowboard-wrap">
            <YellowBoard data={store.yellowData} />
          </div>
          <div className="blueboard-wrap">
            <BlueBoard data={store.blueData} />
          </div>
          <div className="greenboard-wrap">
            <GreenBoard />
          </div>
          <div className="orange-wrap">
            <OrangeBoard />
          </div>
          <div className="purple-wrap">
            <PurpleBoard />
          </div>
          <div className="point-wrap">
            <span>得分:</span>
            <div className="square-cell" style={{ color: '#F9DA4A' }}>
              30
            </div>
            +
            <div className="square-cell" style={{ color: '#1276BE' }}>
              30
            </div>
            +
            <div className="square-cell" style={{ color: '#02A425' }}>
              30
            </div>
            +
            <div className="square-cell" style={{ color: '#EE7C01' }}>
              30
            </div>
            +
            <div className="square-cell" style={{ color: '#571788' }}>
              30
            </div>
            +
            <div className="square-cell" style={{ color: '#D85401' }}>
              30
            </div>
            =
            <div className="square-cell" style={{ color: '#444' }}>
              100
            </div>
          </div>
        </div>
      </div>
    </GeneralContext.Provider>
  );
}
export default GanClever;
